<!-- 销售报表 订单统计 -->
<template>
<<<<<<< HEAD
  <view class="app-container" style="background-color: #f5f7f8; padding: 20rpx">
    <!-- 搜索表单 -->
    <view class="search-card" style="background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx">
      <van-field
        v-model="queryParams.materialName"
        label="物料名称"
        placeholder="请输入物料名称"
        label-width="140rpx"
      />
      
      <view class="filter-item">
        <text class="filter-label">客户名称</text>
        <van-picker
          show-toolbar
          :columns="customerOptions"
          @confirm="onCustomerConfirm"
          @cancel="customerShow = false"
          v-model="selectedCustomer"
          value-key="label"
        />
      </view>

      <view class="filter-item">
        <text class="filter-label">签订日期</text>
        <van-datetime-picker
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onDateConfirm"
          v-model="currentDate"
        />
      </view>

      <view class="action-buttons">
        <van-button 
          type="primary" 
          size="small" 
          color="#1a9c70"
          @click="handleQuery"
          >搜索</van-button>
        <van-button 
          size="small" 
          style="margin-left: 20rpx"
          @click="resetQuery"
          >重置</van-button>
      </view>
    </view>

    <!-- 数据表格 -->
    <view class="data-card" style="background: #fff; border-radius: 16rpx; padding: 24rpx">
      <view class="table-header" style="background: #e8f5ef; color: #1a9c70; padding: 20rpx">
        <text class="header-item" style="flex: 2">订单信息</text>
        <text class="header-item" style="flex: 2">物料信息</text>
        <text class="header-item" style="flex: 1">金额</text>
      </view>

      <scroll-view 
        scroll-y 
        style="height: 60vh"
        @scrolltolower="loadMore"
      >
        <view 
          v-for="(item, index) in contractDetailList"
          :key="index"
          class="table-row"
          style="padding: 20rpx; border-bottom: 1rpx solid #eee"
        >
          <view class="row-item" style="flex: 2">
            <text class="text-primary">订单：{{ item.orderNo }}</text>
            <text class="text-secondary">客户：{{ item.customerName }}</text>
            <text class="text-secondary">日期：{{ formatDate(item.signDate) }}</text>
          </view>
          
          <view class="row-item" style="flex: 2">
            <text class="text-primary">{{ item.materialName }}</text>
            <text class="text-secondary">型号：{{ item.materialModel }}</text>
            <text class="text-secondary">数量：{{ item.quantity }}</text>
          </view>

          <view class="row-item" style="flex: 1; align-items: flex-end">
            <text class="text-price" style="color: #1a9c70">{{ item.amount }}</text>
          </view>
        </view>

        <van-loading v-if="loading" size="24px" vertical>加载中...</van-loading>
        <van-divider v-if="!hasMore">没有更多了</van-divider>
      </scroll-view>
    </view>

    <!-- 导出按钮 -->
    <view class="fixed-export">
      <van-button 
        round 
        color="#1a9c70"
        icon="down"
        @click="handleExport"
        >导出报表</van-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Toast } from 'vant';

// 模拟数据
const mockData = Array.from({ length: 20 }).map((_, i) => ({
  orderNo: `DD20230${i + 1}`,
  contractNo: `HT20230${i + 1}`,
  customerName: ['客户A', '客户B', '客户C'][i % 3],
  contractAmount: (Math.random() * 100000).toFixed(2),
  signDate: new Date(2023, i % 12, (i % 28) + 1),
  materialName: ['物料A', '物料B', '物料C'][i % 3],
  materialModel: `XH-00${i % 5}`,
  price: (Math.random() * 1000).toFixed(2),
  quantity: Math.floor(Math.random() * 100),
  amount: (Math.random() * 100000).toFixed(2),
}));

// 响应式数据
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  customerId: null,
  materialName: '',
  startDate: null,
  endDate: null,
});

const loading = ref(false);
const hasMore = ref(true);
const contractDetailList = ref([]);
const customerOptions = ref([
  { label: '全部客户', value: null },
  { label: '客户A', value: 1 },
  { label: '客户B', value: 2 },
  { label: '客户C', value: 3 },
]);
const selectedCustomer = ref(null);
const currentDate = ref(new Date());
const minDate = new Date(2020, 0, 1);
const maxDate = new Date();

// 方法
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
};

const loadData = async () => {
  loading.value = true;
  try {
    // 模拟接口请求
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    const filtered = mockData.filter(item => {
      const matchesCustomer = !queryParams.customerId || item.customerName === customerOptions.value.find(c => c.value === queryParams.customerId)?.label;
      const matchesMaterial = !queryParams.materialName || item.materialName.includes(queryParams.materialName);
      return matchesCustomer && matchesMaterial;
    });

    const start = (queryParams.pageNum - 1) * queryParams.pageSize;
    const end = start + queryParams.pageSize;
    contractDetailList.value = [...contractDetailList.value, ...filtered.slice(start, end)];
    
    hasMore.value = end < filtered.length;
  } finally {
    loading.value = false;
  }
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  contractDetailList.value = [];
  loadData();
};

const resetQuery = () => {
  queryParams.customerId = null;
  queryParams.materialName = '';
  queryParams.startDate = null;
  queryParams.endDate = null;
  selectedCustomer.value = null;
  handleQuery();
};

const loadMore = () => {
  if (!loading.value && hasMore.value) {
    queryParams.pageNum += 1;
    loadData();
  }
};

const onCustomerConfirm = (value) => {
  queryParams.customerId = value.value;
};

const onDateConfirm = (value) => {
  queryParams.startDate = value;
  queryParams.endDate = value;
};

const handleExport = () => {
  Toast.success('导出成功（模拟）');
  // 实际应调用导出接口
};

// 生命周期
onMounted(() => {
  loadData();
});
</script>

<style>
/* 双碳主题配色 */
:root {
  --primary-color: #1a9c70;
  --secondary-color: #f5f7f8;
}

.search-card {
  box-shadow: 0 4rpx 12rpx rgba(26, 156, 112, 0.1);
}

.filter-item {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}

.filter-label {
  width: 140rpx;
  color: #666;
}

.table-header, .table-row {
  display: flex;
  justify-content: space-between;
}

.header-item {
  font-weight: bold;
  text-align: center;
}

.row-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-primary {
  color: #333;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.text-secondary {
  color: #666;
  font-size: 24rpx;
}

.text-price {
  font-size: 32rpx;
  font-weight: bold;
}

.fixed-export {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
=======
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户名称" prop="customerId">
        <el-select v-model="queryParams.customerId" placeholder="请选择客户" clearable filterable >
          <el-option
            v-for="dict in customerIdOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="签订日期">
        <el-date-picker
          v-model="daterangeSignDate"

          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物料名称"
          clearable

          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button  type="primary"   @click="handleQuery">搜索</el-button>
        <el-button    @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain


          @click="handleExport"
        >导出</el-button>
      </el-col>

    </el-row>

    <el-table v-loading="loading" :data="contractDetailList">
      <el-table-column label="订单编号" align="center" prop="orderNo"  width="200" />
      <el-table-column label="合同编号" align="center" prop="contractNo"  width="200" />
      <el-table-column label="客户名称" align="center" prop="customerName"  width="200" />
      <el-table-column label="合同金额" align="center" prop="contractAmount"  width="200" />
      <el-table-column label="签订日期" align="center" prop="signDate"  width="200" >
        <template #default="scope">
          <span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物料名称" align="center" prop="materialName"  width="200" />
      <el-table-column label="型号" align="center" prop="materialModel"  width="200" />
      <el-table-column label="单价" align="center" prop="price"  width="200" />
      <el-table-column label="订货数量" align="center" prop="quantity"  width="200" />
      <el-table-column label="订货金额" align="center" prop="amount"  width="200" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listContractDetail, exportContractDetail } from "@/api/saleReport/contractDetail";

export default {
  name: "ContractDetailReport",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 销售合同明细表格数据
      contractDetailList: [],
      // 客户id字典
      customerIdOptions: [],
      // 签订日期时间范围
      daterangeSignDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractId: null,
        contractNo: null,
        orderId: null,
        orderNo: null,
        customerId: null,
        signDate: null,
        customerName: null,
        materialId: null,
        materialName: null,
      },
    };
  },
  created() {
    this.getList();
    this.getQueryData("query_customer").then(res => {
      this.customerIdOptions = res.data;
    });
  },
  methods: {
    /** 查询销售合同明细列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeSignDate && '' != this.daterangeSignDate) {
        this.queryParams.params["beginSignDate"] = this.daterangeSignDate[0];
        this.queryParams.params["endSignDate"] = this.daterangeSignDate[1];
      }
      listContractDetail(this.queryParams).then(response => {
        this.contractDetailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 客户id字典翻译
    customerIdFormat(row, column) {
      return this.selectDictLabel(this.customerIdOptions, row.customerId);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeSignDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有销售合同明细数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportContractDetail(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
>>>>>>> 5b8858b09e35d379956227f2720ff4c2cd0dbd08
